<template>
    <div>
        <Editor :id="tinymceId" :api-key="apiKey" :init="init" :disabled="disabled" v-model="myValue"></Editor>
    </div>
</template>
 
<script>
//引入tinymce-vue
import Editor from '@tinymce/tinymce-vue'
//公共的图片前缀
//import Global from "./Global";
export default {
    components: { Editor },
    props: {
        //编号
        id: {
            type: String
        },
        //内容
        value: {
            type: String,
            default: ''
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        //插件
        plugins: {
            type: [String, Array],
            default: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize formatpainter',
        },
        //工具栏
        toolbar: {
            type: [String, Array],
            default: 'code undo redo restoredraft | fullscreen | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | bdmap indent2em lineheight formatpainter axupimgs',
        }
    },
    data() {
        let that = this;
        return {
            apiKey: '9axoyyjarpbz65lssc7lk7f0g99a732t4onhbj5y49l7emhz',
            tinymceId: this.id || 'vue-tinymce' + Date.parse(new Date()),
            myValue: this.value,
            init: {
                //汉化,路径是自定义的
                language_url: "/static/tinymce/langs/zh_CN.js",
                language: 'zh_CN',
                //皮肤
                skin: 'oxide',
                //插件
                plugins: this.plugins,
                //工具栏
                toolbar: this.toolbar,
                //高度
                height: 500,
                // 允许粘贴图片
                paste_data_images: true,
                // 截图 粘贴的图片 需要走上传方法不然就是个文件流 （该方法工具栏里的图片上传 是两个方法。 分开写，此方法为粘贴图片时使用）
                urlconverter_callback: function (url, node, on_save, name) {
                    if (node === 'img' && url.startsWith('blob:') || url.startsWith('data:')) {
                        console.log('urlConverter:', url, 'node',node, on_save, name)
                        tinymce.activeEditor && tinymce.activeEditor.uploadImages()
                    }
                    console.log(url,'粘贴的图片');
                    return url;
                },
                //图片上传(修改位置)
                images_upload_handler: (blobInfo, success, failure) => {
                    console.log("上传图片ing~")
                    //文件上传的formData传递
                    let formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    //上传的api,和后端配合，返回的是图片的地址，然后加上公共的图片前缀(此为示例，之后会安排统一上传路径，走到sucess进行文件的上传)
                    that.$api.system.uploadImage(formData).then(res => {
                        var url = "tt"//Global.baseUrlImg + res;
                        console.log(url)
                        success(url)
                    }).catch(res => {
                        failure('图片上传失败')
                    });
                }
            }
        }
    },
    methods: {

    },
    watch: {
        //监听内容变化
        value(newValue) {
            this.myValue = newValue
        },
        myValue(newValue) {
            this.$emit('input', newValue)
        }
    }
}
</script>
<style>
.tox-notifications-container {
    display: none;
}

/*在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。*/
.tox.tox-silver-sink.tox-tinymce-aux {
    z-index: 2100 !important;
}
</style>